<template>
  <div>
    <div class="banner">
      <div
        class="
          w-1200-container
          h-full
          flex
          justify-center
          align-middle
          items-center
        "
      >
        <div
          class="
            text-5xl
            h-full
            text-white
            font-bold
            flex
            items-center
            justify-center
          "
        >
          独角兽/瞪羚企业自评测
        </div>
        <el-image
          class="pt-8 ml-40"
          style="width: 18.9375rem; height: auto"
          fit="contain"
          :src="require('@/assets/images/exam/selectionPageBanner.png')"
        >
          <div slot="placeholder">加载中<span class="dot">...</span></div>
        </el-image>
      </div>
    </div>

    <div
      class="
        w-1200-container
        p-16
        bg-white
        border-t-2 border-solid border-blue-600
        shadow-lg
      "
      style="width: calc(100% - 4px); margin: 0 auto; margin-bottom: 10rem"
    >
      <div class="py-2 head-box">
        <div class="head-title flex flex-col">
          <span class="text-lg" style="color: #3378fc">独角兽企业测评</span>
          <span class="text-sm"
            >本测试根据<span class="font-bold"
              >2020年江西省独角兽企业入选条件</span
            >设计，测试结果仅供参考！</span
          >
        </div>
      </div>
      <div
        class="mt-2 mb-6 border-b"
        style="margin-left: -3%; width: 106%"
      ></div>

      <div v-if="isMatchResShow">
        <div>
          <div class="match-error">
            <div class="title">评估结果</div>
            <div class="match-content">
              <div>
                <i
                  :class="[matchHeadObj.icon, matchHeadObj.color, 'text-6xl']"
                ></i>
              </div>
              <div class="text-t mt-4">
                您的企业<span class="font-bold" :class="matchHeadObj.color">{{ matchHeadObj.isSucess }}</span>{{ matchHeadObj.title }}的评选条件
              </div>
            </div>
          </div>

          <div class="error-list py-4">
            <div
              v-for="resItem in checkForm"
              :key="resItem.name"
              class="
                flex
                justify-between
                py-3
                px-2
                text-t333
                border-b
                cursor-pointer
                hover:bg-gray-100
              "
            >
              <span>{{ resItem.name }}</span>
              <span :class="[matchResObj(resItem.vv)['color']]">
                <i :class="matchResObj(resItem.vv)['icon']"></i>
                {{ matchResObj(resItem.vv)["title"] }}
              </span>
            </div>
          </div>
          <div class="flex justify-center p-4">
            <el-button
              class="m-auto"
              type="primary"
              round
              @click="hiddenMatchRes"
              >重新评估</el-button
            >
          </div>

          <div class="mt-28">
            <div class="text-center text-xl font-bold my-4">
              江西省独角兽企业申报评选标准（2020）
            </div>
            <div class="leading-8 text-t333 my-4">
              <div class="font-bold text-lg">1. 独角兽企业</div>
              <div>
                <div>指具有发展速度快、稀少，备受投资者青睐等属性的企业。</div>
                <div>①成立时间不超过10年（2010年1月1日（含）之后注册）；</div>
                <div>②估值≥10亿美元；</div>
                <div>③获得过私募投资，且尚未上市。</div>
              </div>
            </div>

            <div class="leading-8 text-t333 my-4">
              <div class="font-bold text-lg">2．潜在独角兽企业</div>
              <div>
                <div>
                  指从创业团队、产业方向、技术创新能力及发展趋势看，具有成为独角兽企业潜质的企业。
                  需同时满足下列条件：
                </div>
                <div>①成立时间10年之内（2011年1月1日（含）之后注册）；</div>
                <div>
                  ②成立5年之内（2016年1月1日（含）之后注册）估值≥1亿美元，或成立5-9年估值≥5亿美元；
                </div>
                <div>③获得过私募投资，且尚未上市。</div>
              </div>
            </div>

            <div class="leading-8 text-t333 my-4">
              <div class="font-bold text-lg">3．种子独角兽企业</div>
              <div>
                <div>
                  指处于创业期，具有较好发展前景，商业模式得到资本和市场初步认可的，具有成为潜在独角兽、独角兽企业潜质的企业，需同时满足下列条件：
                </div>
                <div>①成立时间不超过5年（2015年1月1日（含）之后注册）；</div>
                <div>②估值≥1亿人民币；</div>
                <div>③获得过私募投资，且尚未上市。</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <el-form
          ref="evaluaForm"
          :model="form"
          :rules="rules"
          label-width="120px"
          class="self-form mt-4"
        >
          <div class="develop-item">
            <div class="develop-title">1.申报所在地</div>

            <el-form-item prop="address" label-width="0">
              <AddressSelect
                :provinceV.sync="cityIdList[0]"
                :cityV.sync="cityIdList[1]"
                :areaV.sync="cityIdList[2]"
              />
            </el-form-item>

            <!-- <el-form-item prop="address" label-width="0">
            <el-input v-model="form.address" placeholder="请输入"></el-input>
          </el-form-item>-->
          </div>

          <div class="develop-item">
            <div class="develop-title">2.申报类型</div>
            <el-form-item prop="declareType" label-width="0">
              <el-select v-model="form.declareType" class="w-full">
                <el-option
                  v-for="item in declareTypeTypeList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>

          <div class="develop-item">
            <div class="develop-title">
              3.您的企业是否工商、税务、统计关系在江西省，具有法人资格并实行独立核算？
            </div>
            <el-form-item prop="tax" label-width="0">
              <el-select v-model="form.tax" class="w-full">
                <el-option
                  v-for="item in simpleTypeList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>

          <div class="develop-item">
            <div class="develop-title">
              4.您的企业是否有违法记录，不良信用记录或近三年有重大安全事故、重大环境污染事件？
            </div>
            <el-form-item prop="law" label-width="0">
              <el-select v-model="form.law" class="w-full">
                <el-option
                  v-for="item in simpleTypeList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="develop-item" style="margin-bottom: 22px">
            <div class="develop-title">5.企业发展情况</div>

            <div class="flex justify-between">
              <div
                class="flex-1 mr-4 flex items-center border rounded-md"
                style="height: 36px"
              >
                <div
                  class="px-4 text-gray-600 bg-gray-100 rounded-l-md"
                  style="width: 10rem; height: 36px; line-height: 36px"
                >
                  企业成立时间
                </div>
                <el-form-item
                  prop="buildTime"
                  label-width="0"
                  style="margin: 0; width: 100%"
                >
                  <el-date-picker
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                    placeholder="选择时间"
                    v-model="form.buildTime"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </div>
              <div
                class="flex-1 flex items-center border rounded-md"
                style="height: 40px; line-height: 40px"
              >
                <div
                  class="px-4 text-gray-600 bg-gray-100 rounded-l-md"
                  style="width: 13.5rem"
                >
                  企业估值（万元）
                </div>
                <el-form-item
                  :error="judgeNum(form.comValue)"
                  label-width="0"
                  style="margin: 10px 0; width: 100%"
                >
                  <el-input-number
                    v-model="form.comValue"
                    :min="0"
                    size="lager"
                    style="width: 100%"
                  ></el-input-number>
                </el-form-item>
              </div>
            </div>
          </div>

          <div class="develop-item">
            <div class="develop-title">6.您的企业是否获得过私募投资？</div>
            <el-form-item prop="isVest" label-width="0">
              <el-select v-model="form.isVest" class="w-full">
                <el-option
                  v-for="item in simpleTypeList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="develop-item">
            <div class="develop-title">7.您的企业是否已经上市？</div>
            <el-form-item prop="SEList" label-width="0">
              <el-select v-model="form.SEList" class="w-full">
                <el-option
                  v-for="item in simpleTypeList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>

          <el-form-item class="mt-24" label-width="0">
            <div class="confirm-btn" @click="submitForm('evaluaForm')">
              立即提交
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import userMixin from "../personCenter/mixin.js";

export default {
  mixins: [userMixin],
  components: {},
  data() {
    return {
      cityIdList: [1234, 1235, 1236],
      globalError: false,
      isMatchResShow: false,
      matchSucess: false,
      resRuleName: "",
      nowTimeYear: "2020-01-01",
      form: {
        address: "",
        declareType: "1",
        tax: "1",
        law: "1",
        buildTime: "",
        comValue: 0,
        isVest: "1",
        SEList: "1",
      },
      rules: {
        address: [
          { required: true, message: "请填入申报所在地", trigger: "blur" },
        ],
        buildTime: [
          { required: true, message: "请选择企业成立时间", trigger: "blur" },
        ],
        comValue: [
          { required: true, message: "请填入企业估值", trigger: "blur" },
        ],
      },
      ruleList: [
        {
          ruleName: "rule1",
          title: "独角兽企业",
        },
        {
          ruleName: "rule2",
          title: "潜在独角兽企业",
        },
        {
          ruleName: "rule3",
          title: "潜在独角兽企业",
        },
        {
          ruleName: "rule4",
          title: "种子独角兽企业",
        },
      ],
      rule1: {
        buildTime: {
          vv: 10 * 12,
          name: "成立时间不超过10年（2011年1月1日（含）之后注册）",
        },
        tax: {
          vv: "1",
          name: "工商、税务、统计关系在江西省，具有法人资格并实行独立核算。",
        },
        law: {
          vv: "0",
          name: "无违法记录，无不良信用记录，近三年无重大安全事故、重大环境污染事件。",
        },
        comValue: {
          vv: 6.6326 * 10000,
          name: "估值≥10亿美元",
        },
        isVest: {
          vv: "1",
          name: "获得过私募投资",
        },
        SEList: {
          vv: "0",
          name: "尚未上市",
        },
      },
      rule2: {
        buildTime: {
          vv: 5 * 12,
          name: "成立时间不超过10年（2016年1月1日（含）之后注册）",
        },
        tax: {
          vv: "1",
          name: "工商、税务、统计关系在江西省，具有法人资格并实行独立核算。",
        },
        law: {
          vv: "0",
          name: "无违法记录，无不良信用记录，近三年无重大安全事故、重大环境污染事件。",
        },
        comValue: {
          vv: 6.6326 * 1000,
          name: "估值≥1亿美元",
        },
        isVest: {
          vv: "1",
          name: "获得过私募投资",
        },
        SEList: {
          vv: "0",
          name: "尚未上市",
        },
      },

      rule3: {
        buildTime: {
          minVV: 5 * 12,
          vv: 9 * 12,
          name: "成立时间不超过10年（2016年1月1日（含）之后注册）",
        },
        tax: {
          vv: "1",
          name: "工商、税务、统计关系在江西省，具有法人资格并实行独立核算。",
        },
        law: {
          vv: "0",
          name: "无违法记录，无不良信用记录，近三年无重大安全事故、重大环境污染事件。",
        },
        comValue: {
          vv: 6.6326 * 50000,
          name: "估值≥5亿美元",
        },
        isVest: {
          vv: "1",
          name: "获得过私募投资",
        },
        SEList: {
          vv: "0",
          name: "尚未上市",
        },
      },

      rule4: {
        buildTime: {
          vv: 5 * 12,
          name: "成立时间不超过10年（2016年1月1日（含）之后注册）",
        },
        tax: {
          vv: "1",
          name: "工商、税务、统计关系在江西省，具有法人资格并实行独立核算。",
        },
        law: {
          vv: "0",
          name: "无违法记录，无不良信用记录，近三年无重大安全事故、重大环境污染事件。",
        },
        comValue: {
          vv: 10000,
          name: "估值≥1亿人民币",
        },
        isVest: {
          vv: "1",
          name: "获得过私募投资",
        },
        SEList: {
          vv: "0",
          name: "尚未上市",
        },
      },
      checkForm: {
        buildTime: {
          vv: 1,
          name: "",
        },
        tax: {
          vv: 1,
          name: "",
        },
        law: {
          vv: 1,
          name: "",
        },
        comValue: {
          vv: 1,
          name: "",
        },
        isVest: {
          vv: 1,
          name: "",
        },
        SEList: {
          vv: 1,
          name: "",
        },
      },

      /**
       * 独角兽企业
       * 0 =< nowTime.year - buildTime.year <= 10
       * comValue (万元) >= 6.6326 * 100 000 000 0  （10亿美元）
       * isVest === 1
       * SEList === 0
       *
       */

      /**
       * 潜在独角兽企业
       *
       * 0 =< nowTime.year - buildTime.year <= 5
       * isVest === 1
       * SEList === 0
       * comValue (万元) >= 6.6326 * 100 000 000  （1亿美元）
       *
       * ********************
       * 5 =< nowTime.year - buildTime.year <= 9
       * isVest === 1
       * SEList === 0
       * comValue (万元) >= 6.6326 * 100 000 000  （5亿美元）
       *
       */

      /**
       * 种子独角兽企业
       * 0 =< nowTime.year - buildTime.year <= 5
       * comValue (万元) >= 6.6326 * 100 000 000  （1亿美元）
       * isVest === 1
       * SEList === 0
       *
       */

      declareTypeTypeList: [
        {
          dictLabel: "申报类型A",
          dictValue: "0",
        },
        {
          dictLabel: "申报类型B",
          dictValue: "1",
        },
        {
          dictLabel: "申报类型C",
          dictValue: "2",
        },
      ],
      taxTypeList: [
        {
          dictLabel: "是工商",
          dictValue: "0",
        },
        {
          dictLabel: "是税务",
          dictValue: "1",
        },
        {
          dictLabel: "独立核算",
          dictValue: "2",
        },
      ],
      lawTypeList: [
        {
          dictLabel: "违规记录",
          dictValue: "0",
        },
        {
          dictLabel: "安全事故",
          dictValue: "1",
        },
        {
          dictLabel: "污染事件",
          dictValue: "2",
        },
      ],
      simpleTypeList: [
        {
          dictLabel: "是",
          dictValue: "1",
        },
        {
          dictLabel: "否",
          dictValue: "0",
        },
      ],
      isVestTypeList: [
        {
          dictLabel: "未获得过私募投资？",
          dictValue: "0",
        },
        {
          dictLabel: "获得过私募投资？",
          dictValue: "1",
        },
      ],
      SEListTypeList: [
        {
          dictLabel: "未上市",
          dictValue: "0",
        },
        {
          dictLabel: "已经上市",
          dictValue: "1",
        },
      ],
    };
  },
  computed: {
    matchHeadObj() {
      let ruleItem = this.ruleList.find((item) => {
        return item.ruleName === this.resRuleName;
      });
      let res = {
        icon: "el-icon-error",
        color: "text-red-400",
        title: ruleItem.title,
        isSucess: "不符合",
      };
      if (this.matchSucess) {
        res.icon = "el-icon-success";
        res.color = "text-green-400";
        res.isSucess = "符合";
      }
      return res;
    },
    matchResObj() {
      return (isSucess) => {
        let res = {
          icon: "el-icon-success",
          color: "text-green-400",
          title: "符合",
        };
        if (!isSucess) {
          res.color = "text-red-400";
          res.icon = "el-icon-error";
          res.title = "不符合";
        }
        return res;
      };
    },
  },
  created() {
    this.initKonwledgeDicts();
  },
  mounted() {
    this.getaddress();
  },
  methods: {
    getaddress() {
      if (Array.isArray(this.cityIdList)) {
        this.form.address = this.cityIdList.find((item) => item);
      }
    },
    initKonwledgeDicts() {
      this.getDicts("knowledge_list").then((res) => {
        if (res.code === 200) {
          this.declareTypeTypeList = res.data;
        }
      });
    },
    hiddenMatchRes() {
      this.isMatchResShow = false;
      // this.matchSucess = false
      // 处理完之后 将页面返回顶部
      window.scrollTo(0, 0);
    },
    submitForm(formName) {
      if (this.globalError) {
        return;
      }
      this.$refs[formName].validate((valid) => {
        console.log(this.form);
        if (valid) {
          this.getaddress();
          for (let index = 0; index < this.ruleList.length; index++) {
            const ruleName = this.ruleList[index]["ruleName"];
            let rules = this[ruleName];
            let resRuleName = this.checkFormContent(rules, ruleName);
            if (resRuleName) {
              this.resRuleName = resRuleName;
              this.matchSucess = true;
              break;
            } else {
              this.resRuleName = ruleName;
              this.matchSucess = false;
            }
          }
          this.isMatchResShow = true;

          // 处理完之后 将页面返回顶部
          window.scrollTo(0, 0);
        }
      });
    },
    /**
     * @param       [Object] ruleObj
     * @description 使用 ruleObj 规则 检验 this.form 是否符合规则,符合返回 规则名称
     * @return      ruleName
     */
    checkFormContent(ruleObj, ruleName) {
      let formContent = this.form;
      let nowDate = new Date(this.nowTimeYear);
      let buildTimeDate = new Date(formContent.buildTime);

      let timeDistance = nowDate.getMonth() - buildTimeDate.getMonth();
      let minMonth = ruleObj.buildTime.minVV || 0;

      if (minMonth <= timeDistance <= ruleObj.buildTime.vv) {
        this.checkForm.buildTime.vv = 1;
      } else {
        this.checkForm.buildTime.vv = 0;
      }
      this.checkForm.buildTime.name = ruleObj.buildTime.name;

      // 工商
      if (formContent.tax === ruleObj.tax.vv) {
        this.checkForm.tax.vv = 1;
      } else {
        this.checkForm.tax.vv = 0;
      }
      this.checkForm.tax.name = ruleObj.tax.name;

      // 无违法记录
      if (formContent.law === ruleObj.law.vv) {
        this.checkForm.law.vv = 1;
      } else {
        this.checkForm.law.vv = 0;
      }
      this.checkForm.law.name = ruleObj.law.name;

      // 私募投资
      if (formContent.isVest === ruleObj.isVest.vv) {
        this.checkForm.isVest.vv = 1;
      } else {
        this.checkForm.isVest.vv = 0;
      }
      this.checkForm.isVest.name = ruleObj.isVest.name;

      // 上市情况
      if (formContent.SEList === ruleObj.SEList.vv) {
        this.checkForm.SEList.vv = 1;
      } else {
        this.checkForm.SEList.vv = 0;
      }
      this.checkForm.SEList.name = ruleObj.SEList.name;

      // 公司估值

      if (formContent.comValue >= ruleObj.comValue.vv) {
        this.checkForm.comValue.vv = 1;
      } else {
        this.checkForm.comValue.vv = 0;
      }
      this.checkForm.comValue.name = ruleObj.comValue.name;
      // debugger
      return this.checkFormSucess(ruleName);
    },

    /**
     * @description 对于检测结果是否都符合条件，都符合条件返回 规则名称 ruleName
     * @return      ruleName ( 在 this  中的属性名 )
     */
    checkFormSucess(ruleName) {
      let checkFormKeys = Object.keys(this.checkForm);
      for (let index = 0; index < checkFormKeys.length; index++) {
        const element = checkFormKeys[index];
        if (!this.checkForm[element].vv) {
          // this.matchSucess = false
          return false;
        }
      }
      return ruleName;
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  height: 18.75rem;
  background: linear-gradient(316deg, #1e57f9 0%, #040bd2 100%);
}

.develop-item {
  @apply text-blue-500;
  .develop-title {
    &::before {
      content: "*";
      @apply text-red-400 font-bold pr-1;
    }
    @apply text-lg text-t333 pb-4;
  }
}
.match-sucess,
.match-error {
  @apply border-t-4 border-blue-500 p-6 mt-10 shadow-md;
  .title {
    @apply text-xl font-bold;
  }
  .match-content {
    min-height: 230px;
    height: 230px;
    @apply flex flex-col justify-center items-center text-t333 text-xl;
  }
}

/** 顶部标题样式 */
.head-title {
  @apply relative pl-3;

  &::before {
    content: "";
    position: absolute;
    display: block;
    top: 2px;
    left: -1px;
    width: 3px;
    height: 46px;
    background: #3378fc;
  }
}
</style>
